﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="86400" />
    <meta name="viewport" content="width=device-width, height=device-height" />
    <title>WebDAV Share</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="https://js.live.net/v5.0/ja/wl.js" type="text/javascript"></script>
    <script src="http://storage.saka-pon.net/Contents/Scripts/KLibrary-1.1.87.js" type="text/javascript"></script>
    <link href="http://storage.saka-pon.net/Contents/Styles/TileButton-1.1.83.css" rel="stylesheet" type="text/css" />
    <script src="http://storage.saka-pon.net/Contents/Scripts/TileButton-1.1.83.js" type="text/javascript"></script>
    <link href="Resources/Styles/WebDavShare.css" rel="stylesheet" type="text/css" />
    <script src="Resources/Scripts/WebDavShare.js" type="text/javascript"></script>
    <style type="text/css">
        .content
        {
            height: 650px;
        }
        #AccountSection
        {
            width: 150px;
            height: 150px;
            left: 650px;
            top: -50px;
            text-align: center;
        }
        #AddFileSection
        {
            width: 650px;
            height: 150px;
            left: 0px;
            top: 0px;
        }
        #FilesSection
        {
            width: 800px;
            height: 500px;
            left: 0px;
            top: 150px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="header">
            <h1>WebDAV Share</h1>
        </div>
        <div class="content">
            <div class="section" id="AccountSection">
                <div id="WLSignin"></div>
                <div class="profile" data-context="appModel.Profile" style="margin-top: 12px;"></div>
                <script type="text/plain">
                    <div style="${Id>toProfileCssRule}">
                        <img src="${PictureUri}" alt="${Name}" title="${Name}" style="width: 80px; height: 80px;" />
                        <div>${Name}</div>
                        <div>${IsAdmin>toAdminState}</div>
                    </div>
                </script>
            </div>
            <div class="section" id="AddFileSection">
                <h2 class="accent-border-color">ファイルの追加</h2>
                <div class="add-file">
                    <div class="upload-form">
                        <form id="UploadForm" action="Services/CreateFileForHtml" method="post" enctype="multipart/form-data">
                        <input type="file" id="FileToAdd" name="FileToAdd" style="width: 400px;" />
                        </form>
                    </div>
                    <input type="button" class="tile-text" id="UploadButton" value="アップロード" />
                </div>
            </div>
            <div class="section" id="FilesSection">
                <h2 class="accent-border-color inline-left">ファイル一覧</h2>
                <input type="image" class="tile-image" id="RefreshButton" src="http://storage.saka-pon.net/Contents/Images/Dark/refresh.png" alt="更新" title="更新" />
                <div class="busy-roll"></div>
                <div class="files clear" data-context="appModel.Files"></div>
                <script type="text/plain">
                    <div class="file" data-file-name="${FileName}">
                        <div class="file-name">${FileName}</div>
                        <a class="tile-text" href="${FileName>toFileUri}">ダウンロード</a>
                        <input type="button" class="tile-text delete-button" value="削除" />
                    </div>
                </script>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //<![CDATA[
        var wlClientId = "00000000480DCFD1";

        function toProfileCssRule(x) { return x ? "" : "display: none;"; }
        function toAdminState(x) { return x ? "(管理者)" : ""; }
        function toFileUri(x) { return "Services/FilesForHtml/" + encodeURIComponent(x); }

        var appModel = { Profile: {} };

        $(function () {
            $(document)
                .ajaxStart(function () { $(".busy-roll").show(); })
                .ajaxError(function (e, jqXHR, o, status) {
                    alert(KLibrary.format("Error ({0})", status));
                })
                .ajaxStop(function () { $(".busy-roll").hide(); })
                .tileButton({ bodyForeColor: "#101010", bodyBackColor: "#F0F0F0" });

            WL.Event.subscribe("auth.login", onWLLogin);
            WL.Event.subscribe("auth.logout", onWLLogout);
            WL.init({ client_id: wlClientId });
            WL.ui({ name: "signin", element: "WLSignin" });

            getFiles();

            $("#RefreshButton").click(getFiles);
            $("#UploadButton").click(addFile);
            $(".files").on("click", ".delete-button", function () {
                var fileName = $(this).parent(".file").data("fileName");
                if (!confirm(fileName + " を削除しますか？")) {
                    return;
                }
                deleteFile2(fileName);
            });
        });

        function onWLLogin() {
            var session = WL.getSession();
            if (!session) return;

            WL.api({ path: "me", method: "GET" })
                .then(function (response) {
                    appModel.Profile.Id = response.id;
                    appModel.Profile.Name = response.name;
                    signIn();
                }, function (responseFailed) {
                    alert(responseFailed.error.message);
                });

            WL.api({ path: "me/picture", method: "GET" })
                .then(function (response) {
                    appModel.Profile.PictureUri = response.location;
                    $(".profile").updateTarget();
                }, function (responseFailed) {
                    alert(responseFailed.error.message);
                });
        }

        function onWLLogout() {
            Services.signOut();
            appModel.Profile = {};
            $(".profile").updateTarget();
        }

        function signIn() {
            $.ajaxInvokeByJSON("Membership/SignIn", { UserId: appModel.Profile.Id })
                .done(extendOnDone(function (data) {
                    if (!data.Result) {
                        alert("Live Connect で認証されませんでした。");
                        return;
                    }
                    isUserInAdmins();
                }));
        }

        function getRolesForUser() {
            $.ajaxGetByForm("Roles/GetRolesForUser")
                .done(extendOnDone(function (data) {
                    appModel.Profile.Roles = data.Result;
                    $(".profile").updateTarget();
                }));
        }

        function isUserInAdmins() {
            $.ajaxGetByForm("Roles/IsUserInRole/Admins")
                .done(extendOnDone(function (data) {
                    appModel.Profile.IsAdmin = data.Result;
                    $(".profile").updateTarget();
                }));
        }

        function getFiles() {
            $.ajaxGetByForm("Services/FileEntries")
                .done(extendOnDone(function (data) {
                    appModel.Files = data.Result;
                    $(".files").updateTarget();
                }));
        }

        function addFile() {
            if ($("#FileToAdd").val() == "") {
                return;
            }
            $("#UploadForm").submit();
        }

        function deleteFile(fileName) {
            $.ajaxInvokeByJSON("Services/Files/" + fileName, null, "DELETE")
                .done(extendOnDone(function (data) {
                    getFiles();
                }));
        }

        function deleteFile2(fileName) {
            $.ajaxInvokeByJSON("Services/DeleteFile/" + fileName, null, "POST")
                .done(extendOnDone(function (data) {
                    getFiles();
                }));
        }

        function extendOnDone(onDone) {
            return function (d) {
                if (d != null && d.MessageType > 0) {
                    alert(d.Message);
                    return;
                }
                if (onDone) {
                    onDone(d);
                }
            };
        }
        //]]>
    </script>
    <script type="text/javascript">
        //<![CDATA[
        // 以下は使われていません。
        function addFile0(fileName) {
            $.ajaxInvokeByJSON("Services/Files/" + fileName, [65, 66, 67], "PUT");
        }
        //]]>
    </script>
</body>
</html>
